<template>
  <div class="tkbox cjresult_tkbox onlinebox">
    <div class="tkcontainer clmstart">
      <div class="tk_container clmstart">
        <p class="title">恭喜您中奖</p>
        <div class="tk_infobox msginfo clmcenter">
          <div class="jpbox">
            <img :src="jpimg" class="jpimg" />
            <div class="jpdesbox">
              <p>恭喜您抽中{{ jpname }}</p>
              <p>可在“我的信息”中查看记录</p>
            </div>
          </div>
          <div class="msgfrmbox">
            <p class="qstitle">请输入您的收货信息</p>
            <form>
              <div class="fitem">
                <img src="@/assets/img/icon-uname.png" />
                <input
                  type="text"
                  v-model="uname"
                  placeholder="请输入您的姓名"
                />
              </div>
              <div class="fitem">
                <img src="@/assets/img/icon-mobile.png" />
                <input
                  type="tel"
                  maxlength="11"
                  v-model="utel"
                  placeholder="请输入您的手机号码"
                />
              </div>
              <div class="fitem">
                <img src="@/assets/img/icon-cardp.png" />
                <input
                  type="text"
                  v-model="ucardp"
                  placeholder="请输入您的车牌号"
                />
              </div>
              <div class="fitem">
                <img src="@/assets/img/icon-addr.png" />
                <input
                  type="text"
                  v-model="uaddr"
                  placeholder="请输入您的收货地址"
                />
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="cfmbtnbox" @click="submitGetAddrinfo">
        <img src="@/assets/img/cfm.png" />
      </div>
      <div class="msgtip">
        <p>注：</p>
        <p>
          1、车牌号仅用于核对您是否是骑士<br />
          2、若经主办方核查，不是骑士，主办方有权取消其中奖资格<br />
          3、若手机号错误或联系不上，则视为用户自动弃奖<br />
          4、话费将在中奖后20个工日内直接充值到手机号
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  props: {
    jpname: {
      type: String,
      default: "",
    },
    jpimg: {
      type: String,
      default: "",
    },
    wid: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      uname: "", // 姓名
      utel: "", // 手机号码
      ucardp: "", // 车牌号
      uaddr: "", // 收货地址
    };
  },
  methods: {
    // 提交收货信息
    submitGetAddrinfo() {
      let myreg = /^1[3-9][0-9]{9}$/;
      if (
        this.uname == "" ||
        this.utel == "" ||
        this.ucardp == "" ||
        this.uaddr == ""
      ) {
        Toast("请将信息填写完整！");
        return;
      }
      if (!myreg.test(this.utel)) {
        Toast("手机号码不合法，请重新填写！");
        return;
      }
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      const params = {
        receiver: this.uname,
        phone: this.utel,
        motor_code: this.ucardp,
        address: this.uaddr,
        wid: this.wid,
      };
      this.$http.post("/saveReceiverInfoToPrize", params).then((res) => {
        Toast.clear();
        if (res.data.code === 200) {
          Toast("收货信息提交成功");
          this.$emit("closeOnline");
        } else {
          Toast(res.data.msg);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
//中奖提示：线上领取
.onlinebox {
  .tkcontainer {
    padding: 3rem 0;
    .tk_container {
      width: 658px;
      height: 968px;
      background: url("@/assets/img/msgbox.png") no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      .msginfo {
        width: 94%;
        height: 770px;
        margin-left: 5px;
        .msgfrmbox {
          position: relative;
          margin-top: 1rem;
          .qstitle {
            font-size: 2rem;
            font-weight: bolder;
            text-align: center;
          }
          form {
            .fitem {
              width: 494px;
              height: 90px;
              border: 3px solid #7f7f7f;
              box-sizing: border-box;
              border-radius: 1rem;
              overflow: hidden;
              display: flex;
              margin-top: 2rem;
              img {
                width: 74px;
              }
              input {
                width: calc(100% - 74px);
                height: 100%;
                background: none;
                border-style: none;
                font-size: 2rem;
                color: #000000;
              }
            }
          }
        }
      }
    }
  }
}
</style>
